<template>
  <div>
    <el-form :model="adminForm" label-width="auto" style="max-width: 600px">
    </el-form>
    <el-form-item>
      <!-- 如果想在ElementUI中使用变色的label 在el-from以及el-form-item中设置style或者label-color是不行的 -->
      <span slot="label">
        <span style="color: red; font-weight: bold">*</span>
        <span style="font-size: 18px">账号:</span>
      </span>
      <el-input
        v-model="adminForm.adminID"
        style="width: 310px; margin-left: 18px; height: 40px"
        placeholder="请输入系统管理员账号"
        :prefix-icon="Search"
      />
    </el-form-item>
    <el-form-item>
      <span slot="label">
        <span style="color: red; font-weight: bold">*</span>
        <span style="font-size: 18px">密码：</span>
      </span>
      <el-input
        v-model="adminForm.password"
        style="width: 310px; margin-left: 6px; height: 40px"
        placeholder="请输入系统管理员密码"
        :prefix-icon="Lock"
        show-password
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" class="button" @click="login" :plain="true"
        >登&nbsp;&nbsp;&nbsp;&nbsp;录</el-button
      >
    </el-form-item>
  </div>
</template>

<script setup>
import { ref, inject } from "vue";
import { useRouter } from "vue-router";
import { Lock, Search } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
const axios = inject("axios");
const adminForm = ref({
  adminID: "",
  password: "",
});
const admin = ref({
});

const router = useRouter();
const login =  async() => {
  // 表单验证
  
  await axios.post('Admin/getAdminName',{
    adminID:adminForm.value.adminID,
    password:adminForm.value.password
  }).then( (response) => {  
    admin.value = response.data;
    console.log(admin.value)
  })
  .catch((error) => {
    console.log(error);
  });
  if (adminForm.value.adminID== "" || adminForm.value.password == "") 
  {
    ElMessage({
    message: '登录失败，请输入完整信息！',
    type: 'warning',
    plain: true,
  })
  } 
  else if (admin.value.adminID == adminForm.value.adminID)//在API已经验证password 
   { 
    sessionStorage.setItem("admin", JSON.stringify(admin));
    router.push({
      path:'/IndexA',
      query:{
        adminID:admin.value.adminID
      }
    })
    ElMessage({
    message: '登录成功！',
    type: 'success',  
    plain: true,
  })
    
  } else {    

    console.log(admin.value)  

    ElMessage.error('登录失败，请检查密码是否正确！')
  }
};
</script>

<style scoped>
.el-form-item {
  display: flex;
}
.button {
  margin-top: 10px;
  margin-left: 0px;
  width: 400px;
  height: 40px;
  font-size: 20px;
  font-weight: bold;
}
</style>